<template lang="pug">
  .app-container.devices
    h1.page-title 设备管理
    .main
      h2.title 设备列表
      .search-bar
        el-form(
          ref="form"
          :inline="true"
          :model="form")
          el-form-item
            el-select(v-model="form.value1" placeholder="全部项目")
              el-option(
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value")

          el-form-item
            el-select(v-model="form.value2" placeholder="所属系统")
              el-option(
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value")
          el-form-item
            el-select(v-model="form.value2" placeholder="设备类型")
              el-option(
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value")

          el-form-item
            el-input(
              style="width:300px"
              v-model="form.keyword" placeholder="设备编号、名称、通讯地址、设备Mac")

          el-form-item
            el-button(type="primary" @click="onSubmit") 搜索
        //- end form
      .tool-bar
        el-row
          el-button(type="primary" @click="onCreate") 添加设备
          el-button(class="button-1" @click="onExportExcel") excel导入
          el-button(class="button-2") 模型导入
          el-button(type="danger") 删除
          el-button(type="primary") 导出
      .table-wrapper
        //- el-scrollbar(style="height:100%")
          //- div(style="margin-right:20px")
        el-table(
          :data="tableData"
          stripe
          highlight-current-row=true
          style="width: 100%"
          height="100%")
          el-table-column(
            prop="typeCode"
            label="设备编号")
          el-table-column(
            prop="typeName"
            label="设备名称")
          el-table-column(
            prop=""
            label="所属系统")
          el-table-column(
            prop=""
            label="设备类型")
          el-table-column(
            prop=""
            label="所属项目")
          el-table-column(
            prop=""
            label="位置")
          el-table-column(
            prop=""
            label="协议类型")
          el-table-column(
            prop=""
            label="通讯地址")
          el-table-column(
            prop=""
            label="关联BIM")
          el-table-column
            template(slot="header" slot-scope="scope")
              .label(style="text-align:center") 操作
            template(slot-scope="scope")
              //- router-link(:to="'/data/device-type/detail/'+scope.row.id") 查看
              div(style="text-align:center")
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-search"
                  @click="handleDetail(scope.$index, scope.row)") 查看
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-copy-document"
                  @click="handleEdit(scope.$index, scope.row)") 复制
                el-button(
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)") 删除
      .pagination-wrapper
        el-pagination(
          background
          layout="total, prev, pager, next, jumper"
          :total="pagination.total"
          :current-page.sync="pagination.currentPage"
          :page-size.sync="pagination.pageSize")
    el-dialog(
      custom-class="export-excel-dialog"
      title="Excel导入"
      center
      :visible.sync="exportExcelDialog.dialogVisible"
      :modal-append-to-body="true"
      :append-to-body="true")
      //- el-scrollbar(style="height:100%")
      .dialog-content--wrapper
        el-row(:gutter="20")
          el-col(:span="18")
            span.text 说明：下载模板以后，按照模板样式进行修改信息，再进行文件上传。
          el-col(:span="6")
            el-button(
                  type="primary") 模板下载
        el-row(:gutter="20")
          el-col(:span="18")
            el-input
          el-col(:span="6")
            el-input(id="fileInput" ref="fileInput" class="input-file" type="file" @change="onInputFile")
            el-button(
              class="button-1" @click="onUpload") 文件上传

      div(slot="footer")
        el-button(type="primary") 提交
        el-button(@click="onHideCategoryDialogClose") 取消
</template>

<script>
export default {
  name: 'ProductIndex',
  data () {
    return {
      form: {
        value1: '', // 下拉列表选项 全部项目
        value2: '', // 下拉列表选项 所属系统
        value3: '', // 下拉列表选项 设备类型
        keyword: '' // 设备编号、名称、通讯地址
      },
      // 下拉列表 全部项目
      options1: [
        {
          value: 0,
          label: '全部系统'
        },
        {
          value: 1,
          label: '供水'
        },
        {
          value: 2,
          label: '给排水'
        },
        {
          value: 3,
          label: '供配电'
        },
        {
          value: 4,
          label: '暖通空调'
        },

        {
          value: 5,
          label: '消防'
        },
        {
          value: 6,
          label: '中央空调'
        },
        {
          value: 7,
          label: '排风机设备'
        },
        {
          value: 8,
          label: '空调机组设备'
        },
        {
          value: 9,
          label: '冷冻水系统公共设备'
        },
        {
          value: 10,
          label: '新风机组设备'
        },
        {
          value: 11,
          label: '环境'
        },
        {
          value: 12,
          label: '网络摄像头'
        },
        {
          value: 13,
          label: '电梯'
        },
        {
          value: 14,
          label: '能源'
        },

        {
          value: 15,
          label: '其他'
        }
      ],
      // 下拉列表 所属系统
      options2: [
        {
          value: 0,
          label: '全部产品'
        },
        {
          value: 1,
          label: '默认产品'
        },
        {
          value: 2,
          label: '阿里云产品'
        },
        {
          value: 3,
          label: '电信产品'
        },
        {
          value: 4,
          label: '阿里云网关'
        },

        {
          value: 5,
          label: '终端设备'
        },
        {
          value: 6,
          label: '普通网关'
        }
      ],
      // 下拉列表 设备类型
      options3: [
        {
          value: 0,
          label: '全部产品'
        },
        {
          value: 1,
          label: '默认产品'
        },
        {
          value: 2,
          label: '阿里云产品'
        },
        {
          value: 3,
          label: '电信产品'
        },
        {
          value: 4,
          label: '阿里云网关'
        },

        {
          value: 5,
          label: '终端设备'
        },
        {
          value: 6,
          label: '普通网关'
        }
      ],
      // 表格数据
      tableData: [
        {
          id: 296,
          typeName: 'Bim模型设备',
          delFlag: 0,
          mark: 1,
          typeCode: 1,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            },
            {
              projectName: '自贸大厦0624',
              projectId: 9
            }
          ]
        },
        {
          id: 10,
          typeName: '视频设备',
          typeFilePath: '/data/icon/deviceTypeIcon/20190308143514264304.jpg',
          delFlag: 0,
          mark: 2,
          typeCode: 2,
          createCompanyId: 76,
          typeDeviceImgFilePath: '/data/img/deviceImg/20190309150111279447.jpg',
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 155,
          typeName: '变压器',
          delFlag: 0,
          mark: 3,
          typeCode: 100,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 156,
          typeName: '进线柜',
          delFlag: 0,
          mark: 4,
          typeCode: 101,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 157,
          typeName: '馈线柜',
          delFlag: 0,
          mark: 5,
          typeCode: 102,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16803,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 296,
          typeName: 'Bim模型设备',
          delFlag: 0,
          mark: 1,
          typeCode: 1,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            },
            {
              projectName: '自贸大厦0624',
              projectId: 9
            }
          ]
        },
        {
          id: 10,
          typeName: '视频设备',
          typeFilePath: '/data/icon/deviceTypeIcon/20190308143514264304.jpg',
          delFlag: 0,
          mark: 2,
          typeCode: 2,
          createCompanyId: 76,
          typeDeviceImgFilePath: '/data/img/deviceImg/20190309150111279447.jpg',
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 155,
          typeName: '变压器',
          delFlag: 0,
          mark: 3,
          typeCode: 100,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 156,
          typeName: '进线柜',
          delFlag: 0,
          mark: 4,
          typeCode: 101,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 157,
          typeName: '馈线柜',
          delFlag: 0,
          mark: 5,
          typeCode: 102,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16803,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 296,
          typeName: 'Bim模型设备',
          delFlag: 0,
          mark: 1,
          typeCode: 1,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            },
            {
              projectName: '自贸大厦0624',
              projectId: 9
            }
          ]
        },
        {
          id: 10,
          typeName: '视频设备',
          typeFilePath: '/data/icon/deviceTypeIcon/20190308143514264304.jpg',
          delFlag: 0,
          mark: 2,
          typeCode: 2,
          createCompanyId: 76,
          typeDeviceImgFilePath: '/data/img/deviceImg/20190309150111279447.jpg',
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 155,
          typeName: '变压器',
          delFlag: 0,
          mark: 3,
          typeCode: 100,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 156,
          typeName: '进线柜',
          delFlag: 0,
          mark: 4,
          typeCode: 101,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16815,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        },
        {
          id: 157,
          typeName: '馈线柜',
          delFlag: 0,
          mark: 5,
          typeCode: 102,
          createCompanyId: 251,
          manufacturerCompanyId: 0,
          protocolType: 0,
          devicePamUserId: 0,
          type: 0,
          categoryId: 16803,
          projectInfoList: [
            {
              projectName: '测试-自贸大厦',
              projectId: 6
            }
          ]
        }
      ],
      // 分页
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 666
      },
      // Excel 导入
      exportExcelDialog: {
        dialogVisible: false
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!', this.form)
    },
    onCreate () {
      this.$router.push({ name: 'CreateDevice' })
    },
    /**
     * 查看详情
     */
    handleDetail (index, row) {
      this.$router.push({ name: 'DeviceDetail', params: { id: row.id } })
    },
    /**
     * 导入Excel
     */
    onExportExcel () {
      this.exportExcelDialog.dialogVisible = true
    },
    onHideCategoryDialogClose () {
      this.exportExcelDialog.dialogVisible = false
    },
    onUpload () {
      debugger
      this.$refs.fileInput.$el.click()
    },
    onInputFile (event) {
      console.log(event)
    }
  }
}
</script>

<style lang="stylus" scoped>
.app-container
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  background-color #f2f2f7
  padding 20px
  display flex
  flex-direction column
.page-title
  margin-top 0
  color #000
  font-size 24px
  font-weight normal
  flex-shrink 0
.main
  flex 1
  overflow hidden
  background-color #ffffff
  display flex
  flex-direction column
.title
  display flex
  align-items center
  color #000
  font-size 20px
  font-weight normal
  &::before
    content ''
    display inline-block
    width 7px
    height 22px
    margin-right 20px
    background-color #017eff
.search-bar
  margin 0 20px
.tool-bar
  margin 0 20px
.table-wrapper
  margin 20px
  flex 1
  overflow hidden
.pagination-wrapper
  margin 20px
  display flex
  justify-content flex-end
</style>

<style lang="stylus">
@import '~@theme/common/var.styl'
@import '~@theme/mixins/button.styl'
.el-scrollbar__wrap
  overflow-x hidden
.el-table
  .current-row
    // border: 1px solid #1890ff
    background-color #edf3f8
    position relative
    &::after
      content ''
      position absolute
      right 0
      height 58px
      left 0
      border 1px solid #1890ff
      pointer-events none
  thead
    color #1F232B
  th
    background-color #F8F8F9
.devices
  .button-1
    button-variant($--color-white, #FFBA00, #FFBA00)
  .button-2
    button-variant($--color-white, #B588CA, #B588CA)
.export-excel-dialog
  width 556px
  height 352px
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  margin auto
  margin-top auto !important
  .dialog-content--wrapper
    padding 0 24px
    .el-row
      margin 16px 24px
    .text
      line-height 2
  .button-1
    button-variant($--color-white, #FFBA00, #FFBA00)
  .input-file
      display none
</style>
